<template>
  <div>
    <div class="base_screen_header">
      <span></span>
      <el-form :inline="true" class="base_search_form" @submit.prevent>
        <el-form-item>
          <el-input
            v-model="params.name"
            @keyup[native].enter="getData"
            @change="getData"
            placeholder="名称"
            clearable
            :suffix-icon="Search"
          />
        </el-form-item>
      </el-form>
    </div>
    <DataCollectTable
      ref="tableRef"
      :data="data"
      :config="config"
      :total="total"
      :isRoute="false"
      :isRadio="isRadio"
      @pageChange="pageChange"
    >
    </DataCollectTable>
  </div>
</template>

<script setup>
import DataCollectTable from "@com/table/DataCollectTable.vue";
import { defineProps, ref, defineExpose, defineEmits, watch } from "vue";
import { OP_KEY, COLUMN_TYPE, OPERATIONS } from "@com/table/tableOperations";
import { Search } from "@element-plus/icons-vue";
import $ from "@util/base";
import api from "@api/productChoose";

const props = defineProps({
  type: String,
  typeKey: String,
  codeList: Array,
  isRadio: { type: Boolean, default: false } // 是否是单选
});

watch(
  () => props.typeKey,
  (val) => {
    if (props.type === 'add') {
      getData();
    }
  }
);

watch(
  () => props.codeList,
  (val) => {
    if (props.type === 'show' && $.isNotEmpty(val)) {
      getData();
    }
  }
);

// const emit = defineEmits(['select'])

const name = ref("");

const total = ref(0);
const data = ref([]);

const config = {
  showSelection: props.type === 'add' ? true : false,
  showIndex: true,
  column: [
    {
      label: "产品图片",
      prop: "mainPic",
      type: COLUMN_TYPE.picture,
      width: 100,
    },
    {
      label: "产品名称",
      prop: "name",
    },
    {
      label: "产品编号",
      prop: "code",
      width: 100,
    },
    {
      label: "产品分类",
      prop: "category",
      width: 100,
    },
  ],
};

let params = ref({
  name: null,
  page: null,
  size: null,
});

function pageChange(key, val) {
  params.value[key] = val;
  getData();
}

if ($.isNotEmpty(props.typeKey)) {
  getData()
}

function getData() {
  let query = params.value;
  api.chooseList(
    props.typeKey,
    {
      codeList: props.codeList,
      name: query.name,
      page: query.page,
      size: query.szie,
    },
    (val) => {
      total.value = val.total;
      data.value = val.itemList;
    }
  );
}

const tableRef = ref(null);

function getSelection() {
  let data = tableRef.value.getSelectData();
  data = data.map( item => { return item.code })
  return data 
}

function getSelectData() {
  let data = tableRef.value.getSelectData();
  return data 
}

function clearSelection() {
  tableRef.value.clearSelection()
}

function empty() {
  total.value = 0;
  data.value = [];
}

defineExpose({ getSelection, getSelectData, empty, clearSelection })
</script>
<style lang="scss">
.right {
  text-align: right;
}

.input_width {
  width: 160px;
}

.m_b_15 {
  margin-bottom: 15px;
}
</style>
